import React from 'react'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'

import './LiveRoomHeader.css'
import OnLiveHeader from "./OnLiveHeader/OnLiveHeader"
import NotOnLiveHeader from "./NotOnLiveHeader/NotOnLiveHeader"

const flvjs = window.flvjs

class LiveRoomHeader extends React.Component {

    constructor(props) {
        super(props)
        this.videoRef = React.createRef()
        this.state = {
            showSharePopup: false,
            videoTag: React.createRef(),
            liveDetail: this.props.liveDetail,
            flvPlayer: null,
        }
    }

    componentDidMount() {
        this.playLiveVideo()

        const uid = localStorage.getItem('userid')
        this.props.fetchUserDetail({uid,})

        // this.checkOrientationChange()
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevState.liveDetail !== this.props.liveDetail) {
            this.setState({
                liveDetail: this.props.liveDetail,
            })
            this.playLiveVideo()
        }
    }

    playLiveVideo = () => {
        try {
            const Httpflvaddr = this.props.liveDetail.Httpflvaddr
            if (Httpflvaddr) {
                if (flvjs.isSupported()) {
                    const flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: this.props.liveDetail.Httpflvaddr,
                    })
                    this.setState({
                        flvPlayer: flvPlayer,
                    })
                    const videoEle = this.state.videoTag.current
                    flvPlayer.attachMediaElement(videoEle)
                    flvPlayer.load()
                    flvPlayer.play()
                }
            }
        } catch (e) {
        }

    }

    onShowShare = () => {
        this.setState({
            showSharePopup: true,
        })
    }

    hideSharePopup = () => {
        this.setState({
            showSharePopup: false,
        })
    }


    render() {

        let template
        let status = this.state.liveDetail.Status

        const videoTemplate = (
            <OnLiveHeader
                liveDetail={this.state.liveDetail}
                showSharePopup={this.state.showSharePopup}
                hideSharePopup={this.hideSharePopup}
                onShowShare={this.onShowShare}
            />
        )

        const starNotOnlineTemplate = (
            <NotOnLiveHeader
                liveDetail={this.state.liveDetail}
                showSharePopup={this.state.showSharePopup}
                hideSharePopup={this.hideSharePopup}
                onShowShare={this.onShowShare}
            />
        )
        template = status === 1 ? videoTemplate : starNotOnlineTemplate

        // return template
        return <div style={{
            position: 'absolute',
            top: '0',
            right: '0',
            width: '100%',
        }}>
            {videoTemplate}
        </div>
    }
}

const mapState = state => ({
    liveDetail: state.live.liveDetail,
    dialogues: state.chat.dialogues,
})

const mapDispatch = dispatch => ({
    fetchUserDetail: payload => dispatch.user.fetchUserDetail(payload)
})


export default connect(mapState, mapDispatch)(withRouter(LiveRoomHeader))
// export default withRouter(LiveRoomHeader)
